<template>

    <!-- 添加或修改对话框 -->
    <lam-dialog :title="title" :visible.sync="open" width="680px" @close="cancel">
      <el-form :ref="formRef" :model="form" :rules="rules" label-width="100px" :disabled="formDisabled">
        <el-row>
          <el-col :span="24">
            <el-form-item label="图片" prop="imgUrl">
              <pic-upload v-model="form.imgUrl" busiModule="indexImg" ></pic-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="descs">
              <el-input v-model="form.descs" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <lam-dict-select type="radio" v-model="form.status" dictCode="status_type" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="顺序" prop="sortNo">
              <el-input-number v-model="form.sortNo" clearable controls-position="right" :min="0" style="width: 100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <lam-dict-select type="radio" v-model="form.type" dictCode="index_img_type" placeholder="" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col> -->
          <el-col :span="24" v-if="form.type=='1'">
            <el-form-item label="关联商品" prop="relationProd">
              <div v-if="form.relationProd">
                <el-card :body-style="{ padding: '0px' }" style="height: 270px; width: 182px">
                  <div style="height:180px;">
                    <el-tooltip :content="prodCard.prodName" placement="right" effect="light">
                      <img :src="resourceUrl + prodCard.pic" style="height:180px;">
                    </el-tooltip>
                  </div>
                  <div class="card-prod-bottom" >
                    <span class="card-prod-name" >{{prodCard.prodName}}</span>
                  </div>
                  <div class="card-prod-button" >
                    <el-button type="danger" @click="delSelectedProd">删除</el-button>
                  </div>
                </el-card>
              </div>
              <div v-if="!form.relationProd">
                <el-button @click="toSelectProd" size="small">选择商品</el-button>
                <!-- <el-button @click="addShop"
                           v-if=" dataForm.type == 1"
                           size="small">选择店铺</el-button>
                <el-button @click="addActivity"
                           v-if="dataForm.type == 2"
                           size="small">选择活动</el-button> -->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.type=='2'">
            <el-form-item label="链接" prop="link">
              <el-input v-model="form.link" type="textarea" autosize placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

      <SelectProd ref="selectProdDialog" @ok="selectProdOk" />

    </lam-dialog>

</template>

<script>
import { EditMixin } from '@/components/mixins/EditMixin';
import PicUpload from '@/components/PicUpload'
import SelectProd from '@/views/mall/product/selectProd'

export default {
  name: "EditIndexImg",
  mixins:[EditMixin],
  components:{
    PicUpload,
    SelectProd
  },
  data() {
    return {
      url: {
        base: '/mall/indexImg/'
      },
      // 表单校验
      rules: {
        title: [{required: true, message: "标题不能为空", trigger: "blur" }, {validator: this.titleUniqueValidator, trigger: 'blur'}],
        descs: [{ required: true, message: "描述不能为空", trigger: "blur" }],
        imgUrl: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        link: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        relationProd: [{ required: true, message: "请选择商品", trigger: "blur" }],
      },
      prodCard:{
        pic: '',
        prodName: '',
      }
    };
  },
  created() {
  },
  computed:{
    resourceUrl() {
      return this.$store.getters.resourceUrl
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        shopId: null,
        title: null,
        descs: null,
        imgUrl: null,
        link: null,
        relationProd: null,
        type: 0,
        status: 1,
        sortNo: null,
        remark: null
      };
    },

    /** 在执行proms后打开弹窗之前，返回true则中断打开弹窗 */
    beforeOpen(title, operType, res){
      if(res.data){
        this.prodCard.prodName = res.data.prodName;
        this.prodCard.pic = res.data.pic;
      }
    },

    titleUniqueValidator(rule, value, callback) {
      let param = { title: value};
      if(this.operType=='update') param.id = this.form.id;
      this.checkUniqueAsyn(value, callback, 'indexImgTitle', param);
    },

    delSelectedProd(){
      this.prodCard = {}
      this.form.relationProd = null;
    },
    // 打开选择商品
    toSelectProd () {
      this.$refs.selectProdDialog.show()
    },
    // 添加指定商品
    selectProdOk (prodId, prod) {
      this.prodCard.prodName = prod.prodName;
      this.prodCard.pic = prod.pic;
      this.form.relationProd = prodId;
    },

    /** 提交按钮 */
    submitForm(){
      this.saveForm(this.url.base);
    }

  }
};
</script>

<style scoped>
.card-prod-bottom {
  text-align: left;
  height: 38px;
}
.card-prod-name {
  height: 38px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 180px;
  display: inline-block;
}
.card-prod-button {
  margin-top: 4px;
  text-align: center;
}
</style>
